<template>
  <div class="">
	<iw-header></iw-header>
    <!--主体内容-->
	<!-- 用户登录，点击提交后，如果登录成功就跳转，如果登录失败提示框，用户名或密码错误 -->
    <section class="login_box container">
        <h2 class="title2"><router-link to="/register">新用户注册</router-link><span>用户登录</span></h2>
	
        <div class="clearfloat">
			<!-- 左边 -->
            <div class="login">
                <dl class="clearfloat">
                    <dt><span class="tips" :style="{display:unameship}">用户名不能为空</span>用户名：</dt>
                    <dd>
                        <input @blur="checkUname()" v-model="uname" type="text" id="uname" placeholder="邮箱/手机号"/>
						<!-- //两个图标 -->
                        <em class="icon_user"></em>
                        <i class="icon_error"></i>
                    </dd>
                </dl>
                <dl>
                    <dt><span class="tips" :style="{display:upwdship}" >密码不能为空</span>密码：</dt>
                    <dd>
                        <input @blur="checkUpwd()" v-model="upwd" type="password" id="upwd" placeholder="密码"/>
                        <em class="icon_pwd"></em>
                        <i class="icon_error"></i>
                    </dd>
                </dl>
                <p class="clearfloat">
                    <label>
                        <input type="checkbox"  v-model="savestate"/>
                        <span >自动登录</span>
                    </label>
                    <button type="button" id="login" @click="doLogin()">立 即 登 录</button>
                </p>
    
            </div>
            <em class="linebetween"></em>
			<!-- 右边 -->
            <p class="qrcode">
                <i></i>
                <span>扫码登录</span>
            </p>
        </div>
    </section>

	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
export default {
	data:()=>{
		return { 
			uname:'',
			upwd:'',
			unameship:'none',
			upwdship:'none',
			savestate:false
		}
	},
	methods:{
		doLogin:function(){
			let data={
				uname:this.uname,
				upwd:this.upwd
			}
			this.$http.post("/user/login",data).then(result=>{
				// console.log("查询的结果是",result)
				//登录成功
				if(result.data.code==200){
					// console.log("req.session",req.session);
					//登录成功保存用户信息{uid,uname}到$store里存储
					let data=result.data.userInfo;
					
						// console.log("要推送到$store的数据为",data);
						//尝试使用Localstoreage进行存储
						this.$store.commit('setUserInfo',data);
						//如果勾选了保存密码,那么存储到本地localStorage中
						if(this.savestate){
							localStorage.setItem("userInfo",JSON.stringify(data));
						}
						
					// console.log("检查推送结果",this.$store.state.userInfo);
					// this.$store.setUserInfo()
					alert("登录成功，即将跳转到首页");
					this.$router.push("/index");
				}else{
					alert("登录失败"+result.data.msg);
				}
			}).catch(err=>{
				console.log("登录提交出错了",err);
			})
		},
		checkUname:function(){
			// console.log("检查用户名");
			if(!this.uname){
				this.unameship="block";
			}else{
				this.unameship="none";
			}
		},
		checkUpwd:function(){
			// console.log("检查密码");
			if(!this.upwd){
				this.upwdship="block";
			}else{
				this.upwdship="none";
			}
		},
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer
	}
}	
</script>
<!-- 给style里加 scoped，可以使样式私有化（模块化），避免造成全局污染-->
<style scoped>
	.title2 {
	    border-left:3px solid #77c558;
	    padding-left: 12px;
	    line-height: 20px;
	    font-weight: lighter;
	    font-size: 18px;
	}
	.title2>a {
	    float: right;
	    font-size: 14px;
	    color: #f90;
	    text-decoration: underline;
	}
	.title2>a:hover {
	    color:#f30;
	}
	/*登录*/
	.login_box {
	    margin-top:40px;
	    box-shadow: 0px 0px 3px #ccc;
	    background: #fff;
	    padding: 34px 40px 70px;
	    box-sizing: border-box;
	}
	.login {
	    float: left;
	    width: 360px;
	    margin-top: 35px;
	}
	.login dl {
	    margin-bottom: 5px;
	}
	.login dl dt {
	    font-size: 16px;
	    color:#555;
	    line-height: 40px;
	}
	.login .tips {
	    font-size: 12px;
	    color:#f00;
	    float: right;
	    /* display: none; */
	}
	.login dl dd {
	    position: relative;
	}
	.login dl dd input {
	    box-sizing: border-box;
	    width: 100%;
	    display: block;
	    padding-left: 45px;
	    height:38px;
	    border:1px solid #c6efc2;
	}
	.login dl dd em {
	    position: absolute;
	    top: 1px;
	    left:1px;
	    width: 36px;
	    height: 36px;
	    background: #f5f5f5 url(../assets/images/iconlist.png) no-repeat;
	    border-right: 1px solid #c6efc2;
	    border-radius: 2px 0 0 2px;
	}
	.login dl dd em.icon_user {
	    background-position: 6px -584px;
	}
	.login dl dd em.icon_pwd {
	    background-position: 9px -622px;
	}
	.login dl dd i {
	    position: absolute;
	    width:20px;
	    height:14px;
	    background:url(../assets/images/iconlist.png) no-repeat;
	    right:6px;
	    top:12px;
	    display: none;
	}
	.login dl dd i.icon_error {
	    background-position:0 -670px;
	}
	.login p {
	    line-height: 38px;
	    margin-top: 45px;
	}
	.login p label {
	    float: left;
	}
	.login p input {
	    vertical-align: middle;
	}
	.login p span {
	    font-size: 14px;
	    color:#666;
	    display: inline-block;
	    vertical-align: middle;
	}
	.login p button {
	    float: right;
	    outline: none;
	    width: 160px;
	    height:38px;
	    border:0;
	    background: #72b134;
	    color:#fff;
	    font-size: 18px;
	}
	.login button:hover {
	    background: #7dbc3f;
	}
	.login button:active {
	    background: #85c447;
	}
	.login_box .linebetween {
	    float: left;
	    width: 9px;
	    height: 240px;
	    background: url(../assets/images/line.png) no-repeat 0 0;
	    margin: 40px 0 0 166px;
	}
	.login_box .qrcode {
	    float: left;
	    margin: 75px 0 0 132px;
	    text-align: center;
	    font-size: 14px;
	}
	.login_box .qrcode i{
	    display: block;
	    width: 129px;
	    height: 129px;
		/* //背景 background:color image repeat attachment position */
	    background: url(../assets/images/qrcode.jpg) no-repeat   0 0;
		background-size:contain;
		
	    margin-bottom: 10px;
	}

	
</style>
